<template>

  <el-scrollbar id='search'>
    <div class="search">
      <el-input :placeholder="placeHolder"
                style="width:20%;float:left;"
                clearable
                v-model="searchkey">
      </el-input>

      <div class="block"
           style="margin:0 10px;float:left;width:22%"
           v-if="isShowDate">
        <el-date-picker v-model="activeDate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy-MM-dd"
                        style="width:100%;"
          >
        </el-date-picker>
      </div>
      <el-button type="primary"
                 style="float:right;"
                 @click="$emit('handleAdd',1)"
                 v-if="isShowAdd">{{btnText}}</el-button>
      <el-button type="primary"
                 icon="el-icon-search"
                 @click="$emit('handleSearch', {search:searchkey,start_time:activeDate ? setTime(date.timestamp(new Date(activeDate[0]).getTime()))   : '',end_time:activeDate  ? setTime(date.timestamp(new Date(activeDate[1]).getTime())) : ''})"
                 style="float:right;margin-right:5%;">搜索</el-button>
    </div>
  </el-scrollbar>

</template>

<script>
// import ScrollPane from '@/components/ScrollPane'
import Date from '@/filters/date'
export default {
  name: "searchBar",
  // components: { ScrollPane },
  data () {
    return {
      searchkey: '',
      activeDate: ['', ''],
      date: Date
    }
  },
  props: {
    isShowDate: {
      type: Boolean,
      default: true
    },
    isShowAdd: {
      type: Boolean,
      default: false
    },
    left: {
      type: Number,
      default: 0
    },
    btnText: {
      type: String
    },
    placeHolder: {
      type: String,
      defauld: ''
    }
  },
  methods: {
    setTime (value) {
      if(value === '---') return '';
      else return value.slice(0,10)
    }

  }

}
</script>

<style scoped>
.search::after {
  display: block;
  content: "";
  clear: both;
}
.el-scrollbar {
  width: 100%;
  background-color: white;

  border-bottom: 1px solid #f0f0f0;
}
.search {
  padding: 20px 10px;
}
</style>
